// 1. 利用获取疫情数据
$.ajax({
    url: "https://news.sina.com.cn/project/fymap/ncp2020_full_data.json",
    dataType: 'jsonp',
    jsonpCallback: "jsoncallback",
    success: (res) => {
        // 获取数据
        var allData = res.data;
        var historylist = allData.historylist;
        // 更新时间
        $(".time span").html(allData.cachetime);
        // 2. 设置详情信息
        (function () {
            var infoConfig = {
                "cn_econNum": {
                    "title": '现有确诊',
                    "color": '#ff5e49'
                },
                "cn_asymptomNum": {
                    "title": '无症状',
                    "color": '#fe653b'
                },
                "cn_susNum": {
                    "title": '现有疑似',
                    "color": '#fe8d00'
                },
                "cn_heconNum": {
                    "title": '现有重症',
                    "color": '#525498'
                },
                "cn_conNum": {
                    "title": '累计确诊',
                    "color": '#ff0910'
                },
                "cn_jwsrNum": {
                    "title": '境外输入',
                    "color": '#356ea0'
                },
                "cn_cureNum": {
                    "title": '累计治愈',
                    "color": '#00b1b7'
                },
                "cn_deathNum": {
                    "title": '累计死亡',
                    "color": '#4c5054'
                }
            }
            var htmlStr = "";
            for (var k in infoConfig) {
                // console.log(k, infoConfig[k])
                // console.log(historylist[0][k])
                var value = historylist[0][k] - historylist[1][k]
                htmlStr += `
                    <li> 
                        <h5 style="margin-bottom:7px;">${infoConfig[k].title}</h5>
                        <p style="color:${infoConfig[k].color};margin-bottom:5px;">${historylist[0][k]}</p>
                        <span style="margin-bottom:5px;">
                            <em>昨日</em>
                            <i style="color:${infoConfig[k].color}">
                                ${value > 0 ? "+" + value : value}
                            </i >
                        </span >
                    </li >
                `
            }
            $(".info").html(htmlStr);
        })();
        // 3. 设置中国疫情地图
        (function () {
            // 获取数据
            // 今日数据
            var nowList = []
            // 所有数据
            var allList = []
            var list = allData.list
            list.forEach((item) => {
                nowList.push({
                    name: item.name,
                    value: item.econNum
                })
                allList.push({
                    name: item.name,
                    value: item.value
                })
            })
            // 4. 画图
            var china_map = echarts.init(document.querySelector(".china_map .content"))
            window.addEventListener("resize", china_map.resize)
            var option = {
                tooltip: {
                    show: true,
                    formatter: function (param) {
                        return `
                            <section style="display:flex;align-items:center;
                            position:relative;z-index:9999">
                                <div style="padding:0px 10px;font-size=12px;">
                                    地区：${param.name} <br>确诊：${param.value}
                                </div>
                                <a style="display:flex;align-items:center;
                                height:30px;border-left:1px solid #fff;
                                padding-left:8px;color:#fff;font-size:12px;
                                text-decoration:none;"
                                href="#">
                                    详情 >
                                </a>
                            </section>
                        `
                    },
                    padding: 3,
                    borderColor: '#333',
                    enterable: true,
                    backgroundColor: "rgba(50,50,50,0.7)",
                    textStyle: {
                        color: '#fff'
                    },
                    triggerOn: 'click'
                },
                geo: {
                    map: "china",
                    zoom: 1.2,
                    itemStyle: {
                        areaColor: "#fff",
                        borderColor: "#666",
                        borderWidth: "0.3"
                    },
                    label: {
                        show: true,
                        fontSize: 10
                    },
                    emphasis: {
                        itemStyle: {
                            areaColor: "#b4ffff"
                        }
                    },
                    select: {
                        itemStyle: {
                            areaColor: "#b4ffff"
                        }
                    }
                },
                series: {
                    type: "map",
                    groIndex: 0,
                    map: 'china',
                    data: nowList
                },
                // 映射 旁边的颜色关系
                visualMap: {
                    type: "piecewise",
                    pieces: [
                        { min: 0, max: 0, label: '0', color: '#fff' },
                        { min: 1, max: 9, label: '1-9', color: '#ffe4da' },
                        { min: 10, max: 99, label: '10-99', color: '#ff937f' },
                        { min: 100, max: 999, label: '100-999', color: '#ff6c5e' },
                        { min: 1000, max: 9999, label: '1000-9999', color: '#fe3335' },
                        { min: 10000, label: '>=100000', color: '#cd0000' },
                    ],
                    itemWidth: 30,
                    itemHeight: 30,
                    itemGap: 1,
                    inverse: false
                }
            }
            china_map.setOption(option);
            // 5. 设置我们的地图切换效果
            $(".china_map nav a").click(function () {
                $(".china_map nav a").toggleClass("class")
                // 点击的时候切换option中的series中的data属性
                option.series.data = $(this).index() == 0 ? nowList : allList
                china_map.setOption(option);
            })
        })();

        // 6. 设置中国疫情折线图
        (function () {
            // 初始化数据
            var list = allData.list
            var linedata = []
            // 横坐标城市名
            var linename = []
            // 历史数据
            console.log(list)
            list.forEach((item) => {
                linedata.push({
                    name: item.name,
                    type: 'line',
                    data: [item.econNum, (Number(item.econNum) + Number(item.conadd)).toString()]
                })
            })
            list.forEach((item) => {
                linename.push(item.name)
            })
            console.log(linename)
            console.log(linedata)
            // 初始化图
            var china_line = echarts.init(document.querySelector(".china_line .content"))
            var option = {
                title: {
                    text: '疫情折线图',
                    top: 10,
                    left: 10
                },
                tooltip: {
                    trigger: 'axis',
                    padding: 3,
                    borderColor: '#333',
                    enterable: true,
                    backgroundColor: "rgba(50,50,50,0.7)",
                    textStyle: {
                        color: '#fff'
                    },
                },
                legend: {
                    data: linename,
                    top: 40,
                    left: 40,
                    width: "90%",
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '26%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['昨日', '今日'],
                    nameTextStyle: {
                        fontSize: "30px"
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 700
                },
                series: linedata
            }
            china_line.setOption(option)
        })()
    },
})